<template>
  <div class="m-info clearfix">
    <div class="cover">
      <img
        :src="
          playlist?.coverImgUrl
            ? `${playlist?.coverImgUrl}?param =200y200`
            : require('../../common/images/bgb.png')
        "
      />
      <span class="msk mask1"></span>
    </div>
    <div class="cnt">
      <div class="cntc">
        <div class="hd f-cb">
          <i class="f-fl u-icn u-icn-13 f-pr"
            ><span
              class="f-pa f-r-white-icon"
              style="
                display: inline-block;
                width: 8px;
                height: 8px;
                top: 2px;
                background-size: cover;
                left: 34px;
              "
            ></span
          ></i>
          <div class="tit">
            <h2 class="f-ff2 f-brk">{{ playlist?.name }}</h2>
          </div>
        </div>
        <div class="user f-cb">
          <a class="face" href="/user/home?id=484356241">
            <img
              :src="
                playlist?.creator?.avatarUrl
                  ? `${playlist?.creator?.avatarUrl}?param =40y40`
                  : require('../../common/images/bgb.png')
              "
            />
          </a>
          <span class="name">
            <a href="/user/home?id=484356241" class="s-fc7 unline">{{
              playlist?.creator?.nickname
            }}</a>
          </span>
          <img
            style="
              height: 13px;
              width: 13px;
              display: inline-block;
              vertical-align: middle;
            "
            v-if="playlist?.creator?.avatarDetail?.identityIconUrl"
            :src="playlist?.creator?.avatarDetail?.identityIconUrl"
          />
          <span class="time s-fc4"
            >{{ formattingTime1(playlist?.createTime) }}&nbsp;创建</span
          >
        </div>
        <div class="btns clearfix">
          <SongPlay></SongPlay>
          <SongAdd></SongAdd>
          <SongCollect></SongCollect>
          <SongShare></SongShare>
          <SongDownload></SongDownload>
          <SongCommentNunber></SongCommentNunber>
        </div>
        <div class="tags clearfix">
          <b>标签：</b>
          <ClassLabel
            v-for="(item, index) in playlist?.tags"
            :key="index"
            :txt="item"
          ></ClassLabel>
        </div>
        <p id="album-desc-more" class="intr f-brk">
          <b>介绍：</b> {{ playlist?.description }}
          <br />
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import SongPlay from "@/encapsulation/pageSongFn/SongPlay.vue";
import SongAdd from "@/encapsulation/pageSongFn/SongAdd.vue";
import SongCollect from "@/encapsulation/pageSongFn/SongCollect.vue";
import SongShare from "@/encapsulation/pageSongFn/SongShare.vue";
import SongDownload from "@/encapsulation/pageSongFn/SongDownload.vue";
import SongCommentNunber from "@/encapsulation/pageSongFn/SongCommentNunber.vue";
import ClassLabel from "@/encapsulation/classLabel/ClassLabel.vue";
import { formattingTime1 } from "@/baseFnMixin/formattingTime/formattingTime.js";

export default {
  name: "PlaylistInfo",
  components: {
    SongPlay,
    SongAdd,
    SongCollect,
    SongShare,
    SongDownload,
    SongCommentNunber,
    ClassLabel,
  },
  props: { playlist: { type: Object } },
  setup() {
    return {
      formattingTime1,
    };
  },
};
</script>

<style scoped lang="less">
.cover {
  float: left;
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 -220px px 0 0;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.msk {
  position: absolute;
  width: 208px;
  height: 208px;
  background-position: 0 -1285px;
  top: -4px;
  left: -4px;
}
.cut {
  float: right;
  width: 100%;
}
.cntc {
  margin-left: 230px;
}
.hd {
  position: relative;
  margin: 0 0 12px;
  line-height: 24px;
  h2 {
    line-height: 24px;
    font-size: 20px;
    font-weight: normal;
  }
}
.f-brk {
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.u-icn-13 {
  width: 54px;
  height: 24px;
  background-position: 0 -243px;
}
.u-icn {
  float: left;
  overflow: hidden;
  vertical-align: middle;
}
.tit {
  margin-left: 64px;
  position: relative;
}
.user {
  margin: 0 0 20px;
  line-height: 35px;
  .face {
    margin-right: 10px;
    float: left;
    width: 35px;
    height: 35px;
    img {
      float: left;
      width: 35px;
      height: 35px;
    }
  }
  .name {
    float: left;
  }
  .time {
    margin-left: 15px;
  }
}
.tags {
  margin: 25px 0 5px;
  line-height: 22px;
  height: 25px;
  b {
    float: left;
    font-weight: normal;
    color: #666;
  }
  .u-tag {
    float: left;
    margin: 0px 10px 3px 0;
    padding: 0 10px 0 0;
    height: 22px;
    line-height: 22px;
    text-shadow: 0 1px #fdfdfd;
    background-position: right -27px;
    color: #777;
    text-decoration: none;
    i {
      position: relative;
      float: left;
      padding: 0 3px 0 13px;
      height: 22px;
      line-height: 22px;
      background-position: 0 0;
      zoom: 1;
    }
  }
}
.btns {
  margin-bottom: 25px;
  margin-right: -10px;
  height: 34px;
}
.intr {
  margin-top: 4px;
  line-height: 18px;
  color: #666;
  b {
    font-weight: 400;
    color: inherit;
  }
}
.a::after {
  clear: both;
  content: ".";
  display: block;
  visibility: hidden;
  height: 0;
}
</style>
